<!--
 * @Description: 
 * @Author: wangjx
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wangjx
 * @LastEditTime: 2022-01-10 18:16:12
-->
<template>
  <!--1. 容器 -->
  <div ref="right1_container" style="height: 95%"></div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
export default {
 data() {
     return{
       dataArr:[
  { year: '36.4及以下', 男: 4, 女: 4 },
  { year: '36.5', 男: 6, 女: 5 },
  { year: '36.6', 男: 5, 女: 9 },
  { year: '36.7', 男: 9, 女: 4 },
  { year: '36.8', 男: 6, 女: 8 },
  { year: '36.9', 男: 7, 女: 7 },
  { year: '37.0', 男: 5, 女: 4 },
  { year: '37.1', 男: 2, 女: 2 },
  { year: '37.2', 男: 0, 女: 1 },
  { year: '37.3及以上', 男: 0, 女: 0 }
  ]
     }
   },
   mounted(){
      this.initChart()
   },
   methods:{
     initChart(){
    const dualAxes = new DualAxes(this.$refs.right1_container, {
      data: [this.dataArr,this.dataArr],
      xField: 'year',
      yField: ['男', '女'],
      geometryOptions: [
        {
          geometry: 'line',
          color: '#5B8FF9',
        },
        {
          geometry: 'line',
          color: '#5AD8A6',
        },
      ],
    });

    dualAxes.render();

     }
   }
 }

</script>